<template>
  <div class="top">
    <el-button-group>
      <el-button size="large" round>设备数据</el-button>
      <el-button size="large" type="info" round> 操作历史 </el-button>
    </el-button-group>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="站点">
        <el-select
          v-model="formInline.region"
          placeholder="津荣储能站1 "
          clearable
        >
          <el-option label="津荣储能站1 " value="shanghai" />
          <el-option label="津荣储能站2 " value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="formInline.region" placeholder="电表" clearable>
          <el-option label="津荣储能站1 " value="shanghai" />
          <el-option label="津荣储能站2 " value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-select
          v-model="formInline.region"
          placeholder="防逆流电表 "
          clearable
        >
          <el-option label="津荣储能站1 " value="shanghai" />
          <el-option label="津荣储能站2 " value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
          end-placeholder="结束日期"
          start-placeholder="开始日期"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button>
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>

        <el-button
          v-hasPermi="['system:role:delete']"
          plain
          type="primary"
          @click="handleDelete"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <div>
      <!-- <div class="div table1">
        <el-table
          :data="tableData1"
          style="width: 100%"
          border
          :header-cell-style="{
            borderBottom: 'none',
            borderRight: 'none',
          }"
          :cell-style="{ border: 'none' }"
          :row-style="{ height: '48.5px', width: '48.5px' }"
          class="custom-table"
        >
          <el-table-column
            prop="time"
            label="采集时间"
            align="center"
            width="180"
          />
          <el-table-column
            prop="name"
            label="设备名称"
            align="center"
            width="170"
          />
          <el-table-column
            prop="number"
            label="设备编号"
            align="center"
            width="180"
          />
        </el-table>
      </div> -->
      <div class="div table2">
        <el-table
          :data="tableData2"
          border
          :header-cell-style="{
            borderRight: 'none',
            borderBottom: 'none',
          }"
          :cell-style="{ border: 'none',cellStyle }"
           style="width: 100% ;" ref="table"
          :row-style="{ height: '48.5px', width: '48.5px' }"
          class="custom-table"
        ><el-table-column
            prop="time"
            label="采集时间"
            align="center"
            width="180"
            v-if="showColumn.time"
          />
          <el-table-column
            prop="name"
            label="设备名称"
            align="center"
            width="170"
            v-if="showColumn.name"

          />
          <el-table-column
            prop="number"
            label="设备编号"
            align="center"
            width="180"
            v-if="showColumn.number"

            
          />
          <el-table-column prop="avoltage" label="A相电压" align="center"   v-if="showColumn.avoltage"/>
          <el-table-column prop="bvoltage" label="B相电压" align="center"  v-if="showColumn.bvoltage"/>
          <el-table-column prop="cvoltage" label="C相电压" align="center"  v-if="showColumn.cvoltage"/>
          <el-table-column
            prop="abvoltage"
            label="AB线电压"
            align="center"
            width="100"
            v-if="showColumn.abvoltage"
          />
          <el-table-column
            prop="bcvoltage"
            label="BC线电压"
            align="center"
            width="100"
            v-if="showColumn.bcvoltage"
          />
          <el-table-column
            prop="cavoltage"
            label="CA线电压"
            align="center"
            width="100"
            v-if="showColumn.cavoltage"
          />
          <el-table-column prop="acurrent" label="A相电流" align="center"  v-if="showColumn.acurrent"/>
          <el-table-column prop="bcurrent" label="B相电流" align="center"  v-if="showColumn.bcurrent"/>
          <el-table-column prop="ccurrent" label="C相电流" align="center"  v-if="showColumn.ccurrent"/>
          <el-table-column
            prop="areactivepower"
            label="A相无功功率"
            align="center"
            width="130"
            v-if="showColumn.areactivepower"
          />
          <el-table-column
            prop="breactivepower"
            label="B相无功功率"
            align="center"
            width="130"
            v-if="showColumn.breactivepower"
          />
          <el-table-column
            prop="creactivepower"
            label="C相无功功率"
            align="center"
            width="130"
            v-if="showColumn.creactivepower"
          />
          <el-table-column fixed="right" width="100" align="center">
        <template v-slot:header>
          <!-- <i
            class="el-icon-setting"
            style="font-size: 22px; cursor: pointer"
            @click="showColumnOption"
          ></i> -->
          
          
          <el-icon  :size="22" cursor: pointer  @click="showColumnOption"><Setting /></el-icon>
        </template>
       
      </el-table-column>
        </el-table>
        <transition name="fade">
          <div class="columnOption" v-show="isShowColumn">
            <div class="content">
              <div class="head">全部字段</div>
              <div class="body">
            <el-scrollbar height="400px" class="scrollbar-demo-item">
                <el-checkbox v-model="checkList.time"
                  >采集时间</el-checkbox
                > <el-checkbox v-model="checkList.name"
                  >设备名称</el-checkbox
                > <el-checkbox v-model="checkList.number"
                  >设备编号</el-checkbox
                >
                <el-checkbox v-model="checkList.avoltage"
                  >A相电压</el-checkbox
                >
                <el-checkbox v-model="checkList.bvoltage">B相电压</el-checkbox>
                <el-checkbox v-model="checkList.cvoltage">C相电压</el-checkbox>
                <el-checkbox v-model="checkList.abvoltage" 
                  >AB线电压</el-checkbox
                >
                <el-checkbox v-model="checkList.bcvoltage">BC线电压</el-checkbox>
                <el-checkbox v-model="checkList.cavoltage">CA线电压</el-checkbox>
                <el-checkbox v-model="checkList.acurrent">A相电流</el-checkbox>
                <el-checkbox v-model="checkList.bcurrent">B相电流</el-checkbox>
                <el-checkbox v-model="checkList.ccurrent">C相电流</el-checkbox>
                <el-checkbox v-model="checkList.areactivepower"
                  >A相无功功率</el-checkbox
                >
                <el-checkbox v-model="checkList.breactivepower"
                  >B相无功功率</el-checkbox
                >
                <el-checkbox v-model="checkList.creactivepower"
                  >C相无功功率</el-checkbox
                >
              </el-scrollbar>
              </div>
              <div class="footer">
                <el-button size="small" type="primary" plain @click="saveColumn"
                  >保存</el-button
                ><el-button size="mini" type="text" @click="cancelColumn">取消</el-button>
                
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <!-- 搜索工作栏 -->
  </div>
</template>

<script>
import { Setting } from "@element-plus/icons";
export default {
  components: {
    Setting,
  },
  data() {
    return {
      isShowColumn: false,
      //       tableData1 :[
      //   {
      //     time: '2023-10-11 00：00',
      //     name: '防逆流电表',
      //     number: '12345678',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },
      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },

      //   {
      //     time: '',
      //     name: '',
      //     number: '',
      //   },
      // ],
      tableData2: [
        {
          time: "2023-10-11 00：00",
          name: "防逆流电表",
          number: "12345678",
          avoltage: "228.3",
          bvoltage: "227.5",
          cvoltage: "226.9",
          abvoltage: "440",
          bcvoltage: "456",
          cavoltage: "444",
          acurrent: "100.6",
          bcurrent: "103.8",
          ccurrent: "101",
          areactivepower: "-1.4",
          breactivepower: "-1.6",
          creactivepower: "-1.6",
        },
        {
          time: "",
          name: "",
          number: "",
          avoltage: "",
          bvoltage: "",
          cvoltage: "",
          abvoltage: "",
          bcvoltage: "",
          cavoltage: "",
          acurrent: "",
          bcurrent: "",
          ccurrent: "",
          areactivepower: "",
          breactivepower: "",
          creactivepower: "",
        },
        {
          time: "",
          name: "",
          number: "",
          avoltage: "",
          bvoltage: "",
          cvoltage: "",
          abvoltage: "",
          bcvoltage: "",
          cavoltage: "",
          acurrent: "",
          bcurrent: "",
          ccurrent: "",
          areactivepower: "",
          breactivepower: "",
          creactivepower: "",
        },
        {
          time: "",
          name: "",
          number: "",
          avoltage: "",
          bvoltage: "",
          cvoltage: "",
          abvoltage: "",
          bcvoltage: "",
          cavoltage: "",
          acurrent: "",
          bcurrent: "",
          ccurrent: "",
          areactivepower: "",
          breactivepower: "",
          creactivepower: "",
        },
        {
          time: "",
          name: "",
          number: "",
          avoltage: "",
          bvoltage: "",
          cvoltage: "",
          abvoltage: "",
          bcvoltage: "",
          cavoltage: "",
          acurrent: "",
          bcurrent: "",
          ccurrent: "",
          areactivepower: "",
          breactivepower: "",
          creactivepower: "",
        },
        {
          time: "",
          name: "",
          number: "",
          avoltage: "",
          bvoltage: "",
          cvoltage: "",
          abvoltage: "",
          bcvoltage: "",
          cavoltage: "",
          acurrent: "",
          bcurrent: "",
          ccurrent: "",
          areactivepower: "",
          breactivepower: "",
          creactivepower: "",
        },
      ],
      formInline: [{ user: "", region: "", date: "" }],

      checkList: {},
      showColumn: {
        time: true,
        name: true,
        number: true,
        avoltage: true,
        bvoltage: true,
        cvoltage: true,
        acurrent: true,
        bcurrent: true,
        ccurrent: true,
        areactivepower: true,
        breactivepower: true,
        creactivepower: true,
      },
      queryParams: [
        {
          createTime: [],
        },
      ],

      columns: [
        {
          label: "创建时间",
          prop: "createTime",
        },
      ],
      originalColumns: {},
    };
  },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew);
        this.showColumn = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // 发请求得到checkListInitData的列的名字
    if (localStorage.getItem("columnSet")) {
      this.checkList = JSON.parse(localStorage.getItem("columnSet"));
      this.originalColumns = { ...this.checkList };
    } else {
      this.checkList = {
        time: true,
        name: true,
        number: true,
        avoltage: true,
        bvoltage: true,
        cvoltage: true,
        acurrent: true,
        bcurrent: true,
        ccurrent: true,
        areactivepower: true,
        breactivepower: true,
        creactivepower: true,
      };
      // 初始时，将原始列设置为和当前列设置相同
      this.originalColumns = { ...this.checkList };
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    showColumnOption() {
      this.isShowColumn = true;
    },
    saveColumn() {
      localStorage.setItem("columnSet", JSON.stringify(this.checkList));
      this.isShowColumn = false;
    },
    cancelColumn() {
      // 恢复列为原始状态
      this.checkList = { ...this.originalColumns };

      // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });

      this.isShowColumn = false;
    },
  },
};
</script>
<style  lang="scss" scoped>
.el-button {
  width: 148px;
}
.demo-form-inline {
  --el-input-width: 220px;
  margin-top: 20px;
}
div .div {
  display: inline-block;

  height: 780px;
}
div .div::after {
  content: "";
  display: block;
  clear: both;
}
div .table1 {
  width: 20%;
  /* background-color: #3c3c3d; */
}
.custom-table {
  height: 100%;
}
div .table2 {
  width: 67%;
  border: 2px dashed;
  /* background-color: #3c3c3d; */
}
.columnOption {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 80%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row-reverse;
  .content {
    width: 150px;
    height: 100%;
    background-color: rgb(29, 32, 29);
    .head {
      width: 100%;
      height: 88px;
      border-bottom: 1px solid #000000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
      color: rgb(0, 145, 255);
    }
    .body {
      width: 100%;
      height: calc(100% - 188px);
      box-sizing: border-box;
      padding-top: 20px;
      overflow-y: auto;
      .items {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        .el-checkbox {
          width: 100%;
          height: 28px;
          line-height: 28px;
          margin-bottom: 14px;
          display: inline-block;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding-left: 14px;
        }
        .el-checkbox:hover {
          background-color: #f5f7fa;
        }
      }
    }
    .footer {
      width: 100%;
      height: 44px;
      border-top: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1000px;
  margin: -20px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
::v-deep .el-table {
  thead tr,
  tbody tr{
    td:nth-child(2),th:nth-child(2) {
      border-right: 2px dashed !important;
     
    }
  }
}
</style>
